<script>
import { mapState, mapActions } from 'pinia'
import { useProductStore, useCartStore } from '../stores/02.定义store(选项式)'

export default {
  data() {
    return {
      // 新商品表单数据
      newProduct: {
        name: '',
        price: 0,
        inventory: 1
      },
      // 折扣百分比
      discountPercent: 10
    }
  },
  computed: {
    // 获取store实例
    productStore() {
      return useProductStore()
    },
    cartStore() {
      return useCartStore()
    }
  },
  methods: {
    // 添加新商品
    addNewProduct() {
      if (this.newProduct.name && this.newProduct.price > 0) {
        this.productStore.addProduct({
          name: this.newProduct.name,
          price: Number(this.newProduct.price),
          inventory: Number(this.newProduct.inventory)
        })
        // 重置表单
        this.newProduct = {
          name: '',
          price: 0,
          inventory: 1
        }
      }
    },
    
    // 应用折扣
    applyDiscount() {
      if (this.discountPercent > 0 && this.discountPercent <= 90) {
        this.productStore.applyDiscount(this.discountPercent)
      }
    }
  }
}
</script>

<template>
  <div class="tutorial-container">
    <header>
      <h1>02.定义store(选项式)</h1>
      <p class="subtitle">学习如何使用选项式API定义Pinia Store</p>
      
      <nav class="tutorial-nav">
        <router-link to="/01" class="nav-link">01.认识pinia</router-link>
        <router-link to="/02" class="nav-link">02.定义store(选项式)</router-link>
      </nav>
    </header>

    <main>
      <section class="intro">
        <h2>选项式API介绍</h2>
        <p>选项式API是定义Pinia Store的一种方式，它类似于Vue的选项式API，使用state、getters和actions对象来定义store的状态和行为。</p>
        
        <div class="code-example">
          <pre><code>export const useStore = defineStore('storeName', {
  state: () => ({ /* 状态属性 */ }),
  getters: { /* 计算属性 */ },
  actions: { /* 方法 */ }
})</code></pre>
        </div>
        
        <ul class="key-points">
          <li><strong>state</strong>：相当于组件中的 <code>data</code>，定义store的状态</li>
          <li><strong>getters</strong>：相当于组件中的 <code>computed</code>，用于派生状态</li>
          <li><strong>actions</strong>：相当于组件中的 <code>methods</code>，用于修改状态</li>
        </ul>
      </section>

      <div class="demo-section">
        <div class="products-section">
          <h2>商品管理 <small>(ProductStore)</small></h2>
          
          <!-- 商品列表 -->
          <div class="card">
            <div class="card-header">
              <h3>商品列表</h3>
              <div class="actions">
                <button @click="productStore.toggleLowInventoryDisplay()" class="secondary-button">
                  {{ productStore.showLowInventory ? '隐藏库存不足' : '显示所有商品' }}
                </button>
              </div>
            </div>
            
            <table class="data-table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>商品名称</th>
                  <th>价格</th>
                  <th>库存</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="product in productStore.availableItems" :key="product.id">
                  <td>{{ product.id }}</td>
                  <td>{{ product.name }}</td>
                  <td>¥{{ product.price }}</td>
                  <td :class="{ 'low-inventory': product.inventory <= 5 }">
                    {{ product.inventory }}
                  </td>
                  <td class="actions">
                    <button @click="cartStore.addToCart(product.id)" class="small-button">
                      加入购物车
                    </button>
                    <button @click="productStore.removeProduct(product.id)" class="small-button danger">
                      删除
                    </button>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="2">总计: {{ productStore.totalCount }} 件商品</td>
                  <td colspan="3">总价值: ¥{{ productStore.totalValue }}</td>
                </tr>
              </tfoot>
            </table>
          </div>
          
          <!-- 添加新商品 -->
          <div class="card">
            <h3>添加新商品</h3>
            <div class="form-group">
              <label>商品名称:</label>
              <input v-model="newProduct.name" placeholder="输入商品名称" />
            </div>
            <div class="form-group">
              <label>价格:</label>
              <input v-model.number="newProduct.price" type="number" min="0" />
            </div>
            <div class="form-group">
              <label>库存:</label>
              <input v-model.number="newProduct.inventory" type="number" min="0" />
            </div>
            <button @click="addNewProduct">添加商品</button>
          </div>
          
          <!-- 折扣功能 -->
          <div class="card">
            <h3>应用折扣</h3>
            <div class="form-group">
              <label>折扣百分比:</label>
              <div class="discount-input">
                <input v-model.number="discountPercent" type="number" min="1" max="90" />
                <span>%</span>
              </div>
            </div>
            <button @click="applyDiscount">应用折扣</button>
          </div>
        </div>
        
        <div class="cart-section">
          <h2>购物车 <small>(CartStore)</small></h2>
          
          <!-- 购物车内容 -->
          <div class="card">
            <h3>购物车内容 ({{ cartStore.totalItems }} 件商品)</h3>
            
            <div v-if="cartStore.totalItems === 0" class="empty-cart">
              购物车为空，请添加商品
            </div>
            
            <table v-else class="data-table">
              <thead>
                <tr>
                  <th>商品名称</th>
                  <th>单价</th>
                  <th>数量</th>
                  <th>小计</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in cartStore.cartProducts" :key="item.id">
                  <td>{{ item.name }}</td>
                  <td>¥{{ item.price }}</td>
                  <td>
                    <div class="quantity-control">
                      <button 
                        @click="cartStore.updateCartItemQuantity(item.id, Math.max(1, item.quantity - 1))" 
                        class="quantity-btn"
                      >-</button>
                      <span>{{ item.quantity }}</span>
                      <button 
                        @click="cartStore.updateCartItemQuantity(item.id, item.quantity + 1)" 
                        class="quantity-btn"
                      >+</button>
                    </div>
                  </td>
                  <td>¥{{ item.total }}</td>
                  <td>
                    <button @click="cartStore.removeFromCart(item.id)" class="small-button danger">
                      移除
                    </button>
                  </td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="3">总计:</td>
                  <td colspan="2">¥{{ cartStore.cartTotalPrice }}</td>
                </tr>
              </tfoot>
            </table>
            
            <div v-if="cartStore.totalItems > 0" class="cart-actions">
              <button @click="cartStore.clearCart()" class="danger-button">清空购物车</button>
            </div>
          </div>
        </div>
      </div>
      
      <section class="code-explanation">
        <h2>代码解析</h2>
        
        <div class="explanation-block">
          <h3>1. 定义Store</h3>
          <p>在 <code>02.定义store(选项式).js</code> 文件中，我们使用选项式API定义了两个Store：</p>
          <ul>
            <li><strong>ProductStore</strong>：管理商品数据</li>
            <li><strong>CartStore</strong>：管理购物车数据</li>
          </ul>
        </div>
        
        <div class="explanation-block">
          <h3>2. Store之间的交互</h3>
          <p>CartStore中的getters使用了ProductStore来获取商品详情，这展示了Store之间如何交互：</p>
          <pre><code>cartProducts(state) {
  const productStore = useProductStore()
  return state.items.map(cartItem => {
    const product = productStore.getItemById(cartItem.productId)
    // ...
  })
}</code></pre>
        </div>
        
        <div class="explanation-block">
          <h3>3. 在组件中使用Store</h3>
          <p>在Vue组件中，我们可以直接导入并使用这些Store：</p>
          <pre><code>import { useProductStore, useCartStore } from '../stores/02.定义store(选项式)'

const productStore = useProductStore()
const cartStore = useCartStore()</code></pre>
        </div>
      </section>
    </main>
  </div>
</template>

<style scoped>
.tutorial-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}

.logo {
  display: block;
  margin-bottom: 1rem;
  width: 125px;
  height: 125px;
}

h1 {
  font-size: 2.5rem;
  color: #42b883;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
}

h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}

h3 {
  font-size: 1.4rem;
  color: #2c3e50;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

section {
  margin-bottom: 2rem;
}

.key-points {
  background-color: #f8f8f8;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #42b883;
}

.code-example {
  background-color: #2c3e50;
  color: #fff;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  overflow-x: auto;
}

pre {
  margin: 0;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.demo-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

@media (max-width: 1024px) {
  .demo-section {
    grid-template-columns: 1fr;
  }
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.tutorial-nav {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  gap: 1rem;
}

.nav-link {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border-radius: 4px;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background-color: #e0e0e0;
}

.nav-link.router-link-active {
  background-color: #42b883;
  color: white;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.card-header h3 {
  margin: 0;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.data-table th,
.data-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background-color: #f8f8f8;
  font-weight: 600;
}

.data-table tfoot td {
  font-weight: bold;
}

.low-inventory {
  color: #e53935;
  font-weight: bold;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

button {
  background-color: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #33a06f;
}

.secondary-button {
  background-color: #2c3e50;
}

.secondary-button:hover {
  background-color: #1e2a38;
}

.danger-button {
  background-color: #e53935;
}

.danger-button:hover {
  background-color: #c62828;
}

.small-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.small-button.danger {
  background-color: #e53935;
}

.small-button.danger:hover {
  background-color: #c62828;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.empty-cart {
  text-align: center;
  padding: 2rem;
  color: #666;
}

.cart-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quantity-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discount-input {
  display: flex;
  align-items: center;
}

.discount-input input {
  width: 80px;
  margin-right: 0.5rem;
}

.explanation-block {
  margin-bottom: 1.5rem;
}

.tutorial-nav {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  gap: 1rem;
}

.nav-link {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border-radius: 4px;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background-color: #e0e0e0;
}

.nav-link.router-link-active {
  background-color: #42b883;
  color: white;
}

.explanation-block pre {
  background-color: #f8f8f8;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
}
</style>
